<div *ngIf="!design; else designEditor">
  <h1>
    <clr-icon shape="ruler-pencil" size="48" class="resIcon"></clr-icon>
    创建新的飞船设计
  </h1>
  <br />

  <clr-alert
    class="smallMarginBot"
    [clrAlertType]="'info'"
    [(clrAlertClosed)]="ms.options.hotKeyAlert"
  >
    <clr-alert-item>
      <span class="alert-text">
        快捷键已禁用
      </span></clr-alert-item
    >
  </clr-alert>

  <clr-alert
    [clrAlertType]="'warning'"
    [clrAlertClosable]="false"
    *ngIf="ms.game.fleetManager.ships.length >= 20"
  >
    <clr-alert-item>
      <span class="alert-text">
        达到设计上限，最多可以有20个。
      </span></clr-alert-item
    >
  </clr-alert>

  <div class="clr-row">
    <div class="clr-col-auto">
      <!-- <clr-alert *ngIf="ms.game.fleetManager.ships.length < 1">
        <clr-alert-item>
          <span class="alert-text">
            You don't have any ship design. Create a ship design in order to
            make ships!
          </span></clr-alert-item
        >
      </clr-alert> -->

      <form clrForm>
        <clr-input-container>
          <label>设计名称</label>
          <input clrInput type="text" [(ngModel)]="name" name="name" required />
          <clr-control-error>必填</clr-control-error>
        </clr-input-container>

        <clr-select-container>
          <label>飞船类型</label>
          <select clrSelect name="shipType" [(ngModel)]="type" required>
            <option
              *ngFor="let tp of unlockedShips; trackBy: typeId"
              [ngValue]="tp.id"
            >
              {{ tp.name }}
            </option>
          </select>
          <clr-control-error>这是必填栏！</clr-control-error>
        </clr-select-container>

        <clr-select-container *ngIf="unlockedClasses.length > 0">
          <label>类</label>
          <select clrSelect name="shipClass" [(ngModel)]="class">
            <option ngValue="''"> </option>
            <option
              *ngFor="let tp of unlockedClasses; trackBy: typeId"
              [ngValue]="tp.id"
            >
              {{ tp.name }}
            </option>
          </select>
        </clr-select-container>
      </form>
      <button
        class="btn btn-primary"
        type="submit"
        (click)="generate()"
        [disabled]="isDisabled()"
      >
        制造
      </button>
    </div>
    <div class="clr-col-auto">
      <table class="table table-vertical">
        <tbody>
          <tr>
            <td class="left">海军总容量:</td>
            <td>
              <app-formatted-quantity
                [quantity]="ms.game.fleetManager.totalNavalCapacity"
                [integer]="true"
              >
              </app-formatted-quantity>
            </td>
          </tr>
          <tr>
            <td class="left">已使用海军容量:</td>
            <td>
              <app-formatted-quantity
                [quantity]="ms.game.fleetManager.usedNavalCapacity"
                [integer]="true"
              >
              </app-formatted-quantity>
            </td>
          </tr>
          <tr>
            <td class="left">总飞船数:</td>
            <td>
              <app-formatted-quantity
                [quantity]="ms.game.fleetManager.totalShips"
                [integer]="true"
              >
              </app-formatted-quantity>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="clr-col-auto">
      <table class="table table-vertical table-noborder table-compact">
        <tbody>
          <tr>
            <th>船只</th>
            <th>海军力量</th>
          </tr>
          <tr *ngFor="let tp of unlockedShips; trackBy: typeId">
            <th>{{ tp.name }}</th>
            <td>{{ tp.navalCapacity }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<ng-template #designEditor>
  <app-editor [design]="design"></app-editor>
</ng-template>
